<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <title>web客服插件</title>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/css/material/materialdesignicons.min.css"/>
    <style>
        ul li{
            list-style: none;
            line-height: 28px;
            font-size: 16px;
        }
        ul li>span{
            background: #76baec;
            border-radius: 3px;
            font-size: 12px;
            color: white;
            padding: 1px 4px 4px 4px;
        }
        .tips {
            width: 100%;
            text-align: left;
            font-size: 20px;
            margin-top: 50px;
        }

        .layui-layer-shade {
            background-color: #888888 !important;
        }


        #msg-btn {
            padding: 40px;
            bottom: 0px;
        }

        #msg-btn {
            right: 0;
            position: fixed;
            background-color: transparent;
            pointer-events: none;
        }

        .div_btn {
            transform: none;
            transition: transform .4s cubic-bezier(.3, .55, .1, 1), opacity .1s;
            opacity: 1;
            align-self: flex-end;
            pointer-events: initial;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 12px 1px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 12px 1px rgba(0, 0, 0, .2);
        }

        .a_btn {
            background: #67bbf9;
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

    </style>

</head>
<body style="overflow: hidden;background: #fffdf9;">
<div class="tips">
    <div>
        <ul>
            <li>1.单一客服模式</li>
            <li>2.简单、开箱即用</li>
            <li>3.此页面为用户页（比如官网）</li>
            <li>
                4.使用组件
                    <span>jquery.js</span>
                    <span style="background: #47b6bb;">jquery.cookie.js</span>
                    <span style="background: #8260ec;">layer.js</span>
                    <span>ripple.min.js</span>
                    <span style="background: #54a000;">hui.js</span>
                    <span>materialdesignicons.min.css</span>
                    <span style="background: #c3781a;">ThinkPHP6.0</span>
                    <span>Workman/Gateway</span>
                    <span style="background: #dc6161;">WebSocket</span>
                    <span style="">WeUI.js</span>
                    <span style="background: #8444dc;">mescroll.min.js</span>
                    <span style="background: #d6dc42;">emoji.js</span>
            </li>
            <li style="font-size: 12px;color: #989898;">---------------- 人生苦短世事难料 --------------</li>
            <li><a style="color: #de197d;text-decoration: none;" href="/page/service/index.html" target="_blank">5.客服专员页面</a></li>
            <li style="font-size: 12px;color: #989898;">---------------- 今朝有酒今朝醉 ----------------</li>
        </ul>
    </div>
    <div id="msg-btn">
        <div class="div_btn" lay-tips="快来和我聊天吧">
            <a data-tips class="a_btn" href="javascript:void(0);">
                <i style="color: white !important;" class="mdi mdi-comment-processing-outline"></i>
            </a>
        </div>
    </div>
</div>
<script type="text/javascript" src="__ROOT__/static/js/jquery.js"></script>
<script type="text/javascript" src="__ROOT__/static/js/jquery.cookie.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script type="text/javascript" src="__ROOT__/static/js/config_layui.js" charset="utf-8"></script>

<script>

    var t = 0;

    function getUnreadTotal(){
        $.ajax({
            type: "POST",
            data: {
                'uid':$.cookie("uid")
            },
            url: "/app/websocket/test/getUnreadTotalByUid.html",
            dataType: "json",
            success: function (res) {
                if (!res.code || t === 300){
                    clearInterval(myInterval);
                    return;
                }
                console.log(res);
            },
            error: function (res) {
                console.log(res);
            }
        });
    }


    //设置cookie，设置一个唯一uid
    if (!$.cookie("uid") || $.cookie("uid") === 'null') {
        console.log('cookie-初始化uid');
        $.cookie('uid', randomString());
    }else {
        console.log($.cookie("uid"));
        //启动定时器
        // myInterval = setInterval(function(){
        //     getUnreadTotal();
        //     t++;
        // },2000);
        //阻止定时
        // clearInterval(myInterval);
    }

    //随机字符串生成
    function randomString(e) {
        e = e || 20;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
            a = t.length,
            n = "";
        for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    }

    $('#msg-btn').click(function () {

        if(isPc()){
            layer.open({
                type: 2,
                title: '客服-对话框',
                shadeClose: false,
                shade: true,
                maxmin: false, //开启最大化最小化按钮
                area: ['900px', '700px'],
                content: '/page/chat/box.html?uid='+$.cookie("uid")
            });
        }else {
            layer.open({
                type: 2,
                title: '客服-对话框',
                shadeClose: true,
                shade: true,
                maxmin: false, //开启最大化最小化按钮
                area: ['100%', '100%'],
                content: '/page/chat/box.html?uid='+$.cookie("uid")
            });
        }


    });

    function isPc() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

</script>

</body>
</html>
